<template>
  <el-dialog width="500px" title="新增权限" :visible="showDialog" @close="close">
    <el-form ref="form" :model="formData" :rules="rules" width="300" label-width="100px" size="mini">
      <el-form-item prop="name" label="权限名称">
        <el-input v-model="formData.name" style="width: 300px;" />
      </el-form-item>
      <el-form-item
        prop="code"
        label="权限标识"
      >
        <el-input v-model="formData.code" style="width: 300px;" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="formData.description" style="width: 300px;" type="textarea" :rows="3" />
      </el-form-item>
      <el-form-item label="开启">
        <el-switch v-model="formData.enVisible" active-value="1" inactive-value="0" />
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center" align="bottom">
          <el-col :span="12"> <el-button size="mini" type="primary" @click="submit"> 确定</el-button>
            <el-button size="mini" @click="close">取消</el-button></el-col>

        </el-row>
      </el-form-item>

    </el-form>
  </el-dialog>
</template>
<script>
import { getPermList, addPerm, getPermData, updatePermDetail } from '@/api/permission'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      // 表单数据
      formData: {
        name: '',
        code: '',
        description: '',
        type: null,
        pid: null,
        enVisible: '0'

      },
      // 表单校验规则
      rules: {
        name: [{
          required: 'true',
          message: '不可为空',
          trigger: 'blur'
        },
        {
          validator: async(rule, value, callback) => {
            // 如果formData.id存在，则不用进行去重校验
            if (!this.formData.id) {
              const res = await getPermList()
              if (res.find(item => item.name === value)) {
                callback(new Error('权限名称不可重复'))
              } else {
                callback()
              }
            } else {
              callback()
            }
          }
        }],
        code: [{
          required: 'true',
          message: '不可为空',
          trigger: 'blur'
        },
        {
          validator: async(rule, value, callback) => {
            if (!this.formData.id) {
              const res = await getPermList()
              if (res.find(item => item.code === value)) {
                callback(new Error('权限标识不可重复'))
              } else {
                callback()
              }
            } else {
              callback()
            }
          }
        }]
      }
    }
  },

  methods: {
    // 确定提交功能
    submit() {
      // 整体表单校验
      this.$refs.form.validate(async isOk => {
        if (isOk) {
          let msg = ''
          // 判断是修改还是添加，this.formData.id值存在则为修改反之为添加
          if (this.formData.id) {
            msg = '修改'
            await updatePermDetail(this.formData)
          } else {
            msg = '添加'
            // 判断是添加父权限还是子权限
            if (this.id) {
              this.formData.type = 2
              this.formData.pid = this.id
            } else {
              this.formData.type = 1
              this.formData.pid = 0
            }
            await addPerm(this.formData)
          }

          this.$message.success(msg + '权限成功')
          this.close()
          this.$emit('success')
        }
      })
    },

    // 关闭弹框
    close() {
      // 重置表单
      this.formData = {
        name: '',
        code: '',
        description: '',
        type: null,
        pid: null,
        enVisible: '0'
      }
      // 重置id值
      this.$emit('reset', null)
      this.$refs.form.resetFields()
      // 关闭弹框
      this.$emit('update:showDialog', false)
    },
    // 权限详情数据回显
    async  gobackData() {
      const res = await getPermData(this.id)
      this.formData = res
    }

  }
}
</script>
<style></style>
